<!-- views/inventory/components/ProductStats.vue -->
<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="产品总数"
        :value="stats.totalProducts"
        icon="Box"
        color="#1890ff"
        :trend="stats.productTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="在售产品"
        :value="stats.activeProducts"
        icon="Goods"
        color="#52c41a"
        :trend="stats.activeTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <el-tooltip
        content="库存小于安全库存的产品数量"
        placement="top"
      >
        <StatCard
          title="库存告急"
          :value="stats.lowStockProducts"
          icon="Warning"
          color="#fa8c16"
          :trend="stats.lowStockTrend"
        />
      </el-tooltip>
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="新品上架"
        :value="stats.newProducts"
        suffix="个"
        icon="Star"
        color="#722ed1"
        :trend="stats.newProductTrend"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import { ElTooltip } from 'element-plus'
import StatCard from '@/components/StatCard.vue'

interface ProductStats {
  totalProducts: number
  activeProducts: number
  lowStockProducts: number
  newProducts: number
  productTrend: number
  activeTrend: number
  lowStockTrend: number
  newProductTrend: number
}

const props = defineProps<{
  stats: ProductStats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}
</style>